<template>
  <div>
    <div class="row">
      <div class="col-2">
      </div>
      <div class="col-7">
        <h3 class="text-center mb-3 font-weight-bold word-width">
          <p>{{dataMsg.chapter}}</p>
          <small class="text-muted font-italic"></small>
        </h3>
        <div>
          <ul class="list-unstyled text-small text-center word-width list-group">
            <li class="text-left list-group-item list-group-flush" v-for="itm in dataMsg.paragraphs">{{itm}}</li>
          </ul>
        </div>
      </div>
      <div class="col-3"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'DaXue',
    data () {
      return {
        dataMsg: {
          'chapter': '大學',
          'paragraphs': [
            '大學之道，在明明德，在親民，在止於至善。知止而后有定，定而后能靜，靜而后能安，安而后能慮，慮而后能得。物有本末，事有終始，知所先後，則近道矣。',
            '古之欲明明德於天下者，先治其國；欲治其國者，先齊其家；欲齊其家者，先修其身；欲修其身者，先正其心；'
          ]
        }
      }
    },
    computed: {
      dataMessage () {
        return this.$store.getters.dataMsg
      }
    },
    watch: {
      dataMessage () {
        this.dataMsg = this.$store.getters.dataMsg
      }
    },
    mounted: function () {
      if (!this.$store.getters.dataMsg) {
        this.changeUrl()
      }
    },
    methods: {
      changeUrl () {
        let url = null
        if (window.location.href.includes('#/daxue')) {
          url = '/sishuwujing/daxue.json'
        } else if (window.location.href.includes('#/zhongyong')) {
          url = '/sishuwujing/zhongyong.json'
        } else {
          return
        }
        this.queryDate(url)
      },
      queryDate: function (url) {
        this.$store.dispatch('loadDataMsg', url)
      }
    }
  }
</script>
<style scoped>
  .word-width {
    letter-spacing: 8px;
  }
</style>
